{include file="../application/app/view/header.html"}
<link rel="stylesheet" type="text/css" href="/static/css/comment.css">
</head>
<body class="container-fluid">

  <div class="modal fade kesn_loading" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
      <div class="modal-dialog modal-sm">
          <div><span class="icon-spinner icon-spin"></span>加载中....</div>
      </div>
    </div>

	<section>
		<nav class="navbar navbar-default kesn_nav" role="navigation">
		  <div class="navbar-header">
		    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-01">
		      <span class="sr-only">Toggle navigation</span>
		    </button>
		    <img src="/static/img/dashenli.png" alt="DSL WMS" class="col-md-5 col-md-offset-0">
		    <!-- <a class="navbar-brand" href="#">Flat UI</a> -->
		  </div>
		   <div class="collapse navbar-collapse" id="navbar-collapse-01">
            <ul class="nav navbar-nav login_nav" data-ifLogin="{$login_status}">
              
              {if condition="$login_status eq 'never'"}
              <li  class="login_link" data-toggle="modal" data-target="#login_view"><a href="#" class="force_login">登录</a></li>
              {elseif condition="$login_status eq 'have'"}
              {if condition="$never_read_num > '0'"}
              <li class="never_read">
                  <a href="/index.php/app/talk/never_read_view">
                    未读信息
                    <!-- Indicator with number -->
                    <span class="navbar-new">{$never_read_num}</span>
                  </a>
                </li>
              {/if}  
              <li data-_user_id="{$user_id}" data-_user_role="{$user_role}" class="user_info"><a href="#fakelink">{$user_name}</a></li>
              <li class="logout" data-url="{$logout_url}"><a href="#fakelink">退出登录</a></li>
              <li class=" {if condition="$active eq 'personal_set'"} active {/if} "><a href="{$personal_url}?user_id={$user_id}">个人设置</a></li>
              {/if}
            </ul>
          </div><!-- /.navbar-collapse -->

      <div class="modal fade" tabindex="-1" role="dialog" id="login_view">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <!-- <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> -->
            <h4 class="modal-title">用户登录</h4>
          </div>
          <div class="modal-body">
            <form class="form-horizontal">
          <div class="form-group">
            <label for="user_name" class="col-sm-2 control-label">用户名</label>
            <div class="col-sm-10">
              <input type="text" class="form-control login_name"  placeholder="用户名">
            </div>
          </div>
          <div class="form-group">
            <label for="password" class="col-sm-2 control-label">密码</label>
            <div class="col-sm-10">
              <input type="password" class="form-control login_password"  placeholder="密码">
            </div>
          </div>
        </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-primary kesn_login" data-url="/index.php/app/talk/login">登录</button>
            <button type="button" class="btn btn-inverse kesn_register_view" data-url="/index.php/app/main/get_warehouse_list">注册</button>
          </div>
        </div><!-- /.modal-content -->
      </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



		  <hr class="kesn_cutOffRule">
		  <ul class="navbar-nav col-md-12 kesn_linkUl">
		      <li class="col-md-2"><a href="/index.php/app/main/index">首页</a></li>
		      <li class="col-md-2"><a href="/index.php/app/course/index">教程</a></li>
           <li class="col-md-2"><a href="/index.php/app/policy/index">文件</a></li>
		      <li class="col-md-2 active"><a href="/index.php/app/talk/index">论坛</a></li>
		      <li class="col-md-2"><a href="/index.php/app/resource/index">资料下载</a></li>
              <li class="col-md-2"><a href="/index.php/app/questions/index">测试</a></li>
		    </ul>
		  
		  </div>
		</nav><!-- /navbar -->		
	</section>
	<section>

         <form class="navbar-form navbar-left" action="index" role="search"  method="get">
          <div class="form-group">
            <div class="input-group input-group-rounded">
              <input class="form-control" id="keyword" name="keyword" type="search" placeholder="请输入评论名">
              <span class="input-group-btn">
                <button type="submit" class="btn kesn_search"><span class="fui-search"></span></button>
              </span>
            </div>
          </div>
        </form>

		<div class="commentAll" style="width: 800px;">

	    <!--评论区域 begin-->
	    <div class="reviewArea clearfix">
	        <textarea class="content comment-input" placeholder="请在此处发表问题意见....." onkeyup="keyUP(this)"></textarea>
	        <a href="javascript:;" class="plBtn">评论</a>
	    </div>
	    <!--评论区域 end-->
	    <!--回复区域 begin-->
        {volist name="talk_list" id="talk"}
	    <div class="comment-show kesn_talk_item">
	        <div class="comment-show-con clearfix" data-talk_id ="{$talk.id}">
	            <div class="comment-show-con-img pull-left"><img src="/static/img/dslIcon.png" alt=""></div>
	            <div class="comment-show-con-list pull-left clearfix">
	                <div class="pl-text clearfix">
	                    <a href="#" class="comment-size-name" data-hf_id="{$talk.user_id}" data-hf_role="{$talk.user_role}">{$talk.commentName} : </a>
	                    <span class="my-pl-con">&nbsp;{$talk.commentContent}</span>
	                </div>
	                <div class="date-dz">
	                    <span class="date-dz-left pull-left comment-time">{$talk.commentTime}</span>
	                    <div class="date-dz-right pull-right comment-pl-block">
	                        {if condition="$login_status eq 'have' AND $talk.commentName eq $user_name"}<a href="javascript:;" class="removeBlock">删除</a>{/if}
	                        <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a>
	                        <span class="pull-left date-dz-line">|</span>
	                        <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">{$talk.likes}</i>)</a>
	                    </div>
	                </div>
	                <div class="hf-list-con">
                        {volist name="talk.talkhf" id="talkhf"}
                        <div class="all-pl-con kesn_talkhf_item" data-talkhf_id="{$talkhf.id}">
                            <div class="pl-text hfpl-text clearfix">
                            <a href="#" class="comment-size-name" data-hf_id="{$talkhf.hfNameId}" data-hf_role="{$talkhf.hfRole}">{$talkhf.hfName}:</a><span class="my-pl-con">回复<a href="#" class="atName" data-at_id={$talkhf.at_id} data-at_role="{$talkhf.at_role}">{$talkhf.atName}</a> : {$talkhf.hfContent}</span>
                            </div>
                            <div class="date-dz"> 
                                <span class="date-dz-left pull-left comment-time">{$talkhf.hfTime}</span> 
                            <div class="date-dz-right pull-right comment-pl-block"> 
                                {if condition="$login_status eq 'have' AND $talkhf.hfName eq $user_name"}<a href="javascript:;" class="removeBlock">删除</a>{/if} 
                                <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> 
                                <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num">{$talkhf.likes}</i>)</a> 
                            </div> 
                            </div>
                        </div>
                        {/volist}
                    </div>
	            </div>
	        </div>
	    </div>
        {/volist}
	    <!--回复区域 end-->
		</div>
        {$page}
	</section>


{include file="../application/app/view/footer.html"}
<script type="text/javascript" src="/static/js/jquery.flexText.js"></script>
<script type="text/javascript">
    $(function () {
        $('.content').flexText();
    });
</script>
<!--textarea限制字数-->
<script type="text/javascript">
    function keyUP(t){
        var len = $(t).val().length;
        if(len > 139){
            $(t).val($(t).val().substring(0,140));
        }
    }
</script>
<!--点击评论创建评论条-->
<script type="text/javascript">
    $('.commentAll').on('click','.plBtn',function(){
        var _this = $(this);
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        if(m<10) m = '0' + m;
        var s=myDate.getSeconds();
        if(s<10) s = '0' + s;
        var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
        //获取输入内容
        var oSize = $(this).siblings('.flex-text-wrap').find('.comment-input').val();
        var user_name = $('.user_info').children('a').html();
        if (user_name == '' || user_name == undefined) {
            alert('请先登录！');
            return;
        }
        var user_id = $('.user_info').attr('data-_user_id');
        var user_role = $('.user_info').attr('data-_user_role');
        if (oSize == '') {
            alert('发表内容不能为空！');
            return;
        }
        // console.log(oSize);
        $.ajax({
          url : 'creat_talk',
          async:true,
          type:'POST',
          data:{
            'commentName':user_name,
            'user_id':user_id,
            'commentContent':oSize
          },
          dataType:'JSON',
          success:function(data,textStatus,jqXHR){
                if (data.err != 0) {
                    alert(data.content);
                    return;
                }else if (data.err == '0') {
                    oHtml = '<div class="comment-show-con clearfix kesn_talk_item" data-talk_id = '+data.talk_id+'><div class="comment-show-con-img pull-left"><img src="/static/img/dslIcon.png" alt=""></div> <div class="comment-show-con-list pull-left clearfix"><div class="pl-text clearfix"> <a href="#" class="comment-size-name" data-hf_id="'+user_id+'" data-hf_role="'+user_role+'">'+user_name+': </a> <span class="my-pl-con">&nbsp;'+ oSize +'</span> </div> <div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"><a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num"></i>)</a> </div> </div><div class="hf-list-con"></div></div> </div>';
                    if(oSize.replace(/(^\s*)|(\s*$)/g, "") != ''){
                        _this.parents('.reviewArea ').siblings('.comment-show').prepend(oHtml);
                        _this.siblings('.flex-text-wrap').find('.comment-input').prop('value','').siblings('pre').find('span').text('');
                    }
                }
               
              },
              error:function(){
               return;
              }
        });
        

    });
</script>
<!--点击回复动态创建回复块-->
<script type="text/javascript">
    $('.comment-show').on('click','.pl-hf',function(){
        //获取回复人的名字
        var fhName = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        //回复@
        var fhN = '回复@'+fhName;
        //var oInput = $(this).parents('.date-dz-right').parents('.date-dz').siblings('.hf-con');
        var fhHtml = '<div class="hf-con pull-left"> <textarea class="content comment-input hf-input" placeholder="" onkeyup="keyUP(this)"></textarea> <a href="javascript:;" class="hf-pl">评论</a></div>';
        //显示回复
        if($(this).is('.hf-con-block')){
            $(this).parents('.date-dz-right').parents('.date-dz').append(fhHtml);
            $(this).removeClass('hf-con-block');
            $('.content').flexText();
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.pre').css('padding','6px 15px');
            //console.log($(this).parents('.date-dz-right').siblings('.hf-con').find('.pre'))
            //input框自动聚焦
            $(this).parents('.date-dz-right').siblings('.hf-con').find('.hf-input').val('').focus().val(fhN);
        }else {
            $(this).addClass('hf-con-block');
            $(this).parents('.date-dz-right').siblings('.hf-con').remove();
        }
    });
</script>
<!--评论回复块创建-->
<script type="text/javascript">
    $('.comment-show').on('click','.hf-pl',function(){
        var user_name = $('.user_info').children('a').html();
        var user_id = $('.user_info').attr('data-_user_id');
        var user_role = $('.user_info').attr('data-_user_role');
        if (user_name == undefined) {
            alert('请先登录！');
            return;
        }
        var oThis = $(this);
        var myDate = new Date();
        //获取当前年
        var year=myDate.getFullYear();
        //获取当前月
        var month=myDate.getMonth()+1;
        //获取当前日
        var date=myDate.getDate();
        var h=myDate.getHours();       //获取当前小时数(0-23)
        var m=myDate.getMinutes();     //获取当前分钟数(0-59)
        if(m<10) m = '0' + m;
        var s=myDate.getSeconds();
        if(s<10) s = '0' + s;
        var now=year+'-'+month+"-"+date+" "+h+':'+m+":"+s;
        //获取输入内容
        var oHfVal = $(this).siblings('.flex-text-wrap').find('.hf-input').val();
        console.log(oHfVal)
        var oHfName = $(this).parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').html();
        var oAllVal = '回复@'+oHfName;
        if(oHfVal.replace(/^ +| +$/g,'') == '' || oHfVal == oAllVal){

        }else {
            var user_name = $('.user_info').children('a').html();
            var hr_arr = {};
            hr_arr['talk_id'] = oThis.parents('.comment-show-con').attr('data-talk_id');
            hr_arr['atName'] = oHfName;
            hr_arr['at_id'] = oThis.parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').attr('data-hf_id');
            hr_arr['at_role'] = oThis.parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.comment-size-name').attr('data-hf_role');
            hr_arr['ohfval'] = oHfVal;
            
            $.getJSON("creat_talkhf",hr_arr,function(data){
                console.log(data);
                var oAt = '';
                var oHf = '';
                $.each(data,function(n,v){
                    delete v.hfContent;
                    delete v.atName;
                    var arr;
                    var ohfNameArr;
                    if(oHfVal.indexOf("@") == -1){
                        data['atName'] = '';
                        data['hfContent'] = oHfVal;
                        data['at_id'] = '0';
                        data['at_role'] = 'null'
                    }else {
                        arr = oHfVal.split(':');
                        ohfNameArr = arr[0].split('@');
                        data['hfContent'] = arr[1];
                        data['atName'] = ohfNameArr[1];
                        data['at_id'] = oThis.parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.atName').attr('data-at_id');
                        data['at_role'] = oThis.parents('.hf-con').parents('.date-dz').siblings('.pl-text').find('.at_role').attr('data-at_role');

                    }

                    if(data.atName == ''){
                        oAt = data.hfContent;
                    }else {
                        oAt = '回复<a href="#" class="atName" data-at_id="'+data.at_id+'" data-at_role="'+data.at_role+'">@'+data.atName+':</a> : '+data.hfContent;
                    }
                    oHf = data.hfName;
                });

                var oHtml = '<div class="all-pl-con kesn_talkhf_item" data-talkhf_id="'+data.talkhf_id+'"><div class="pl-text hfpl-text clearfix"><a href="#" class="comment-size-name" data-hf_id="'+user_id+'" data-hf_role="'+user_role+'">'+user_name+':</a><span class="my-pl-con">'+oAt+'</span></div><div class="date-dz"> <span class="date-dz-left pull-left comment-time">'+now+'</span> <div class="date-dz-right pull-right comment-pl-block"> <a href="javascript:;" class="removeBlock">删除</a> <a href="javascript:;" class="date-dz-pl pl-hf hf-con-block pull-left">回复</a> <span class="pull-left date-dz-line">|</span> <a href="javascript:;" class="date-dz-z pull-left"><i class="date-dz-z-click-red"></i>赞 (<i class="z-num"></i>)</a> </div> </div></div>';
                oThis.parents('.hf-con').parents('.comment-show-con-list').find('.hf-list-con').css('display','block').prepend(oHtml) && oThis.parents('.hf-con').siblings('.date-dz-right').find('.pl-hf').addClass('hf-con-block') && oThis.parents('.hf-con').remove();
            });
        }
    });
</script>
<!--删除评论块-->
<script type="text/javascript">
    $('.commentAll').on('click','.removeBlock',function(){
        var _this = $(this);
        var del_arr = {};
        if (_this.parents('.kesn_talkhf_item').attr('data-talkhf_id') == undefined) {
            del_arr['talk_id'] = _this.parents('.kesn_talk_item').children('.comment-show-con').attr('data-talk_id');
        }else{
            del_arr['talkhf_id'] = _this.parents('.kesn_talkhf_item').attr('data-talkhf_id');
        }
        $.ajax({
            url : 'del',
            async:true,
            type:'POST',
            data:del_arr,
            dataType:'JSON',
            success:function(data,textStatus,jqXHR){
                    console.log(data);
                    if (data.err != 0) {
                       return;
                    }else if (data.err == 0) {
                       
                    }

                },
                error:function(){
                    return;
                }
        });
        var oT = $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con');
        if(oT.siblings('.all-pl-con').length >= 1){
            oT.remove();
        }else {
            $(this).parents('.date-dz-right').parents('.date-dz').parents('.all-pl-con').parents('.hf-list-con').css('display','none')
            oT.remove();
        }
        $(this).parents('.date-dz-right').parents('.date-dz').parents('.comment-show-con-list').parents('.comment-show-con').remove();

        
    })
</script>
<!--点赞-->
<script type="text/javascript">
    $('.comment-show').on('click','.date-dz-z',function(){
        var _this = $(this);
        var _data ={};
        if (_this.parents('.all-pl-con').attr('data-talkhf_id') == undefined) {
            _data['talk_id'] = _this.parents('.comment-show-con').attr('data-talk_id');
        }else{
            _data['talkhf_id'] = _this.parents('.all-pl-con').attr('data-talkhf_id');
        }
        var zNum = $(this).find('.z-num').html();
        var _num = 0;
        if($(this).is('.date-dz-z-click')){
            zNum--;
            _num = '-1';
            $(this).removeClass('date-dz-z-click red');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').removeClass('red');
        }else {
            zNum++;
            _num = '1';
            $(this).addClass('date-dz-z-click');
            $(this).find('.z-num').html(zNum);
            $(this).find('.date-dz-z-click-red').addClass('red');
        }
        _data['num'] = _num;
        $.ajax({
          url : 'save_likes',
          async:true,
          type:'POST',
          data:_data,
          dataType:'JSON',
          success:function(data,textStatus,jqXHR){
            var _html = '';
                if (data.err != 0) {
                }else if (data.err == 0) {
                  
                }
               
              },
              error:function(){
               
              }
        });
    })
</script>

</footer>
</body>
</html>